@charset "UTF-8";

@import url(../../../../css/mobile/normalize.css);
@import url(../../../../css/mobile/components/alert.css);
@import url(../../../../css/mobile/components/login.css);

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'VarelaRound-Regular';
  src: url(../../../../fonts/mobile/VarelaRound-Regular.eot);
  src: url(../../../../fonts/mobile/VarelaRound-Regular.eot) format('embedded-opentype'),
       url(../../../../fonts/mobile/VarelaRound-Regular.woff) format('woff'),
       url(../../../../fonts/mobile/VarelaRound-Regular.ttf) format('truetype'),
       url(../../../../fonts/mobile/VarelaRound-Regular.svg) format('svg');
}

html, body {
  font-family: "VarelaRound-Regular", "PingFang SC", "Microsoft YaHei";
}

html, body, .container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #32CDFF;

  // iPhone 5
  @media only screen and (min-device-width : 320px) and (max-device-width : 374px) and (orientation : portrait) {
    overflow-y: scroll;
  }
}

body {
  font-size: 16px;
}

.alert-box {
  position: fixed;
  bottom: 20px;
  left: calc(50% - 100px);
  color: white;
  width: 170px;
  padding:15px;
  line-height: 20px;
  background-color: #ff5f76;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  display: none;
  z-index: 1009;
}

.success-toast {
  background-color: #40c39a;
}

.failed-toast{
  border: 1px solid #ff5f76 !important;
  z-index: 9999;
}

.header {
  z-index: 200;
  height: 180px;
  margin: 0 auto;
  text-align: center;
  -webkit-backface-visibility: hidden;
  color: #FFFFFF;
  position: relative;
  > {
    .count {
      margin-top: 20px;
      font-size: 28px;
      &:after {
        content: '节';
        font-size: 14px;
      }
    }
    .target {
      margin-top: 2px;
      color: rgba(255, 255, 255, 0.7);
    }
    .rate {
      margin-top: 32px;
      font-size: 40px;
      &:after {
        content: '节/周';
        font-size: 14px;
      }
    }
    .rate-title {
      position: absolute;
      top: 124px;
      left: 10px;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.container > header > .line {
  position: absolute;
  top: 159px;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}

.nav {
  position: relative;
  top: 20px;
  left: 0;
  width: 33%;
  height: 20px;
  list-style: none;
  margin: 0 auto;
  -webkit-padding-start: 0;
}

.triplelayout .nav {
  width: 100%;
}

.nav li {
  display: inline-block;
  margin-bottom: 10px;
  text-align: center;
  text-decoration: none;
  visibility: hidden;
}

.triplelayout .nav li {
  position: absolute;
  visibility: hidden;
  display: inline-block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
}

.nav li a {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  outline: none;
  border-radius: 50%;
  background-color: #32CDFF;
  vertical-align: middle;

  &:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
  }
}

.triplelayout .nav .nav-current.li {
  border-color: #fff;
  color: #fff;
}

.container {
  &.move-left .nav-right.li, &.move-right .nav-left.li {
    border-color: #fff;
    color: #fff;
  }
  &.move-left .nav-current.li, &.move-right .nav-current.li {
    border: 3px solid rgba(50, 205, 255, 0.8);
  }
}

.triplelayout .nav {
  .nav-left, .nav-right, .nav-left-outer, .nav-right-outer {
    visibility: visible;
  }
  .nav-current {
    visibility: visible;
    left: 0;

    a {
      width: 20px;
      height: 20px;
      &:after {
        left: 5px;
        top: 5px;
      }
      &:before {
        content: '';
        position: absolute;
        left: 2px;
        top: 2px;
        width: 16px;
        height: 16px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
      }
    }
  }
  .nav-left {
    left: -32%;
  }
  .nav-right {
    left: 32%;
  }
  .nav-right-outer {
    left: 132%;
  }
  .nav-left-outer {
    left: -132%;
  }
}

.container {
  &.move-left {
    .nav-left, .nav-left-outer, .nav-current, .nav-right, .nav-right-outer {
      -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
      transition: transform 0.5s, opacity 0.5s;
      -webkit-transform: translate3d(-32%, 0, 0);
      transform: translate3d(-32%, 0, 0);
    }
  }
  &.move-right {
    .nav-left, .nav-left-outer, .nav-current, .nav-right, .nav-right-outer {
      -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
      transition: transform 0.5s, opacity 0.5s;
      -webkit-transform: translate3d(32%, 0, 0);
      transform: translate3d(32%, 0, 0);
    }
  }
  &.move-left .nav-left, &.move-right .nav-right {
    opacity: 0;
  }
}

.triplelayout .wrapper {
  > section:not(.current) {
    height: 100%;
  }
  .left, .left-outer, .current, .right, .right-outer {
    visibility: visible;
  }
  .left {
    left: -68%;
    /* 80 - 10 */
  }
  .left-outer {
    left: -148%;
    /* - 70 - 80 */
  }
  .current {
    z-index: 100;
  }
  .right {
    left: 92%;
    /* 80 + 10 */
  }
  .right-outer {
    left: 172%;
    /* 90 + 80 */
  }
}

.container {
  &.move-left {
    .left, .current, .right, .right-outer {
      -webkit-transition: -webkit-transform 0.5s;
      transition: transform 0.5s;
      -webkit-transform: translate3d(-104.5%, 0, 0);
      transform: translate3d(-104.5%, 0, 0);
    }
  }
  &.move-right {
    .left, .left-outer, .current, .right {
      -webkit-transition: -webkit-transform 0.5s;
      transition: transform 0.5s;
      -webkit-transform: translate3d(104.5%, 0, 0);
      transform: translate3d(104.5%, 0, 0);
    }
  }
}

.sidenav {
  div {
    position: fixed;
    top: 0;
    z-index: 500;
    width: 10%;
    height: 100%;
    cursor: pointer;
  }
  .sidenav-left {
    left: 0;
  }
  .sidenav-right {
    right: 0;
  }
}

.wrapper {
  position: relative;
  display: block;
  min-height: 100%;
  width: 100%;
  // iPhone 5
  @media only screen and (min-device-width : 320px) and (max-device-width : 374px) and (orientation : portrait) {
    min-height: 80%;
  }

  > section {
    z-index: 1;
    min-height: 100%;
    &:before {
      display: inline-block;
      position: relative;
      top: -16px;
      width: 0;
      height: 0;
      content: '';
      border-width: 8px 7.5px;
      border-style: solid;
      border-color: transparent transparent #FFFFFF transparent;
    }
  }
}

.triplelayout .wrapper > section {
  height: 100%;
  width: 76vw;
  border-radius: 6px;
  background-color: #FFFFFF;
  text-align: center;
  position: absolute;
  top: 0;
  left: 12%;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.wrapper > section > {
  .time {
    margin-top: -10px;
    font-size: 14px;
    color: #999EA8;
  }
  .line {
    width: 86%;
    height: 1px;
    background:rgba(231,232,234,.5);
    margin-top: 10px;
    margin-left: 7%;
  }
  .title {
    margin-top: 24px;
    font-size: 18px;
    color: #4B4F57;
    font-family: PingFangSC-Medium;
  }
  .award {
    height: 168px;
    margin-top: 40px;
    position: relative;
    > {
      .item {
        width: 50%;
        position: absolute;
        .text {
          margin-top: 8px;
        }
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
      .top-left {
        top: 0;
        left: 0;
      }
      .top-right {
        top: 0;
        right: 0;
      }
      .bottom-left {
        bottom: 0;
        left: 0;
      }
      .bottom-right {
        bottom: 0;
        right: 0;
      }
    }
  }
  .buttons {
    margin-top: 30px;
    text-align: center;
    > button {
      width: 78.95%;
      height: 44px;
      border-radius: 1rem;
      border: 0;
      outline: none;
      margin: 0.025rem auto;
      &.blue {
        color: #FFFFFF;
        background: #32CDFF;
      }
      &.white {
        color: #32CDFF;
        background: #FFFFFF;
      }
    }
  }
}